import React, { Component } from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
interface Iprops {
  previousText?: string;
  nextText?: string;
  onPressPrevious?: () => void;
  onPressNext?: () => void;
}

class Footer extends Component<Iprops> {
  render() {
    const { previousText = '上一步', nextText = '下一步', onPressPrevious, onPressNext } = this.props;
    return (
      <View style={styles.container}>
        {!!onPressPrevious && (
          <TouchableOpacity style={[styles.button, styles.left]} onPress={onPressPrevious}>
            <Text style={styles.contentBox}>{previousText}</Text>
          </TouchableOpacity>
        )}
        {!!onPressNext && (
          <TouchableOpacity style={[styles.button, styles.right]} onPress={onPressNext}>
            <Text style={styles.contentBox}>{nextText}</Text>
          </TouchableOpacity>
        )}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    height: 50,
    flexDirection: 'row',
    borderTopWidth: 2,
    borderTopColor: '#87B838',
  },
  button: {
    flex: 1,
  },
  left: {
    alignSelf: 'flex-start',
  },
  right: {
    alignSelf: 'flex-end',
  },
  contentBox: {
    color: '#ffffff',
    lineHeight: 50,
    textAlign: 'center',
    backgroundColor: '#87B838',
  },
});

export default Footer;
